dd.project.ui.button({
    init:function()
    {
        // Define Styles
        dd.defs({
            linearGradient:{
                button_normal_background:{
                    x1:"0", y1:"0", x2:"0", y2:"100%",
                    stop:[
                        {color:"#dddddd"},
                        {color:"#a6a6a6"}
                    ]
                },
                button_normal_foreground:{
                    x1:"0", y1:"0", x2:"0", y2:"100%",
                    stop:[
                        {color:"#ffffff"},
                        {color:"#e8e8e8"}
                    ]
                },
                button_hover_background:{
                    x1:"0",y1:"0",x2:"0",y2:"100%",
                    stop:[
                        {color:"#dddddd"},
                        {color:"#a6a6a6"}
                    ]
                },
                button_hover_foreground:{
                    x1:"0",y1:"0",x2:"0",y2:"100%",
                    stop:[
                        {color:"#f4f4f4"},
                        {color:"#DFDFDF"}
                    ]
                },
                button_active_background:{
                    x1:"0",y1:"0",x2:"0",y2:"100%",
                    stop:[
                        {color:"#9C9C9C"},
                        {color:"#E1E1E1"}
                    ]
                },
                button_active_foreground:{
                    x1:"0",y1:"0",x2:"0",y2:"100%",
                    stop:[
                        {color:"#BBBBBB", offset:"0%"},
                        {color:"#ECECEC", offset:"14%"}
                    ]
                },
                button_disabled_background:{
                    x1:"0", y1:"0", x2:"0", y2:"100%",
                    stop:[
                        {color:"#dddddd"},
                        {color:"#BCBCBC"}
                    ]
                },
                button_disabled_foreground:{
                    x1:"0", y1:"0", x2:"0", y2:"100%",
                    stop:[
                        {color:"#ffffff"},
                        {color:"#F4F4F4"}
                    ]
                }
            }
        });
        dd.control("button", function(o)
        {
            o = o || {};
            o.x = o.x || 0;
            o.y = o.y || 0;
            o.width = o.width || 80;
            o.height = o.height || 24;
            var btn = dd(this.parent).group();
            dd(btn).translate(o);
            dd(btn).style("cursor", "pointer");
            var shadow = dd(btn).rect(0, 3, o.width, o.height - 3, {
                r:3,
                opacity:0.08,
                fill:"#000"
            });
            var back = dd(btn).rect(0, 0, o.width, o.height - 1, {
                r:3,
                fill:"url(#button_normal_background)"
            });
            var fore = dd(btn).rect(1, 1, o.width - 2, o.height - 3, {
                r:3,
                fill:"url(#button_normal_foreground)"
            });
            var text = dd(btn).text(o.text, {
                x:Math.floor(o.width / 2),
                y:Math.floor(o.height / 2) + 4,
                textAnchor:"middle",
                fill:"#787878",
                shadow:"#ffffff"
            });
            // region is completely dev related
            var region = dd(btn).region(o);
            this.property("disabled", {
                get:function()
                {
                    return dd(this.btn).style("cursor") == "default";
                },
                set:function(v)
                {
                    if(v)
                    {
                        dd(this.back).style({fill:"url(#button_disabled_background)"});
                        dd(this.fore).style({fill:"url(#button_disabled_foreground)"});
                        dd(this.text).style({fill:"#B5B5B5"});
                        dd(this.btn).style("cursor", "default");
                        dd(this.shadow).style("opacity", "0.05");
                    }
                    else
                    {
                        dd(this.back).style({fill:"url(#button_normal_background)"});
                        dd(this.fore).style({fill:"url(#button_normal_foreground)"});
                        dd(this.text).style({fill:"#787878"});
                        dd(this.btn).style("cursor", "pointer");
                        dd(this.shadow).style("opacity", "0.1");
                    }
                    return v;
                }
            }, {btn:btn, back:back, fore:fore, text:text, shadow:shadow});
            this.property("text", {
                get:function()
                {
                    return dd(this.text).text;
                },
                set:function(v)
                {
                    return dd(this.text).text = v;
                }
            }, {text:text});
            this.property("width", {
                get:function()
                {
                    return dd(this.region).width;
                },
                set:function(v)
                {
                    
                    return dd(this.region).width = v;
                }
            }, {region:region, btn:btn, back:back, fore:fore, text:text, shadow:shadow});
            // the parent is the "g" element since svg objects are individual controls themselves
            dd(btn).event({
                mouseover:function()
                {
                    if(!dd(this.control).disabled)
                    {
                        dd(this.back).style({fill:"url(#button_hover_background)"});
                        dd(this.fore).style({fill:"url(#button_hover_foreground)"});
                    }
                },
                mouseout:function()
                {
                    if(!dd(this.control).disabled)
                    {
                        dd(this.back).style({fill:"url(#button_normal_background)"});
                        dd(this.fore).style({fill:"url(#button_normal_foreground)"});
                        dd(this.text).style({y:Math.floor(dd(this.region).height / 2) + 4});
                        dd(this.shadow).show();
                    }
                },
                mousedown:function()
                {
                    if(!dd(this.control).disabled)
                    {
                        dd(this.text).style({y:Math.floor(dd(this.region).height / 2) + 5});
                        dd(this.back).style({fill:"url(#button_active_background)"});
                        dd(this.fore).style({fill:"url(#button_active_foreground)"});
                        dd(this.shadow).hide();
                    }
                },
                mouseup:function()
                {
                    if(!dd(this.control).disabled)
                    {
                        dd(this.text).style({y:Math.floor(dd(this.region).height / 2) + 4});
                        dd(this.back).style({fill:"url(#button_normal_background)"});
                        dd(this.fore).style({fill:"url(#button_normal_foreground)"});
                        dd(this.shadow).show();
                    }
                },
                click:function()
                {
                    dd(this.text).style({y:Math.floor(dd(this.region).height / 2) + 4});
                    if(!dd(this.control).disabled)
                    {
                        dd(this.control).trigger("click");
                    }
                }
            }, {control:this, region:region, back:back, fore:fore, text:text, shadow:shadow});
        });
    }
});